<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <META http-equiv=Content-Type content="text/html; charset=utf-8">
    <title>Helper应用 </title>
</head>
<body>
<h1>Helper应用</h1>
<!--基础html框架-->
<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>状态</th>
            <th>个人主页(编译后)</th>
            <th>个人主页(未编译)</th>
        </tr>
    </thead>
    <tbody id="tableList">
    </tbody>
</table>
<!-- 引用插件 -->
<script type="text/javascript" src="/static/js/jquery-3.1.1.js"
        charset="utf-8"></script>
<script type="text/javascript" src="/static/js/handlebars-v4.0.2.js"
        charset="utf-8"></script>
<%-- 显示数据的模板 --%>
<script id="table-template" type="text/x-handlebars-template">
    {{#each student}}
        {{#if name}}
            {{#compare age 20}}
                <tr>
                    <td>{{name}}</td>
                    <td>{{transformat sex}}</td>
                    <td>{{age}}</td>
                    <td>{{checkStatus status}}</td>
                    <td>{{homePage}}</td>
                    <td>{{{homePage}}}</td>
                </tr>
            {{else}}
                <tr>
                    <td>?</td>
                    <td>?</td>
                    <td>?</td>
                </tr>
            {{/compare}}
        {{/if}}
    {{/each}}
</script>
<script type="text/javascript">
    $(document).ready(function(){
       //模拟数据
        var data = {
            "student":[
                {
                    "name":"张三",
                    "sex":"0",
                    "age":32,
                    "status":0,
                    "homePage":"<a href='javascript:void(0);'>妞妞的个人主页</a>"
                },
                {
                    "sex":"1",
                    "age":32,
                    "status":1,
                    "homePage":"<a href='javascript:void(0);'>妞妞的个人主页</a>"
                },
                {
                    "name":"李四",
                    "sex":"1",
                    "age":15,
                    "status":2,
                    "homePage":"<a href='javascript:void(0);'>妞妞的个人主页</a>"
                },
                {
                    "name":"王五",
                    "sex":"1",
                    "age":46,
                    "status":1,
                    "homePage":"<a href='javascript:void(0);'>妞妞的个人主页</a>"
                },
                {
                    "name":"赵六",
                    "sex":"1",
                    "age":58,
                    "status":2,
                    "homePage":"<a href='javascript:void(0);'>妞妞的个人主页</a>"
                }
            ]
        };
        var myTemplate = Handlebars.compile($("#table-template").html());


        //注册一个比较大小的Helper,判断大小,满足条件执行,不满足执行{{else}}
        Handlebars.registerHelper("compare",function(age,v2,options){
            //age,v2是传递过来的,传递多个属性值,依次向后写就可以
            if(age > v2){
                //条件满足继续执行
                return options.fn(this);
            }else {
                //条件不满足执行{{else}}部分
                return options.inverse(this);
            }
        });

        //注册一个翻译用的Helper,直接返回text
        Handlebars.registerHelper("transformat",function (sex) {
            if(sex == 0){
                return "男";
            }else if(sex == 1){
                return "女";
            }
        });

        //注册一个直接返回html用的Helper
        Handlebars.registerHelper("checkStatus",function (status) {
            if(status == 0){
                return new Handlebars.SafeString("<span style='color: brown'>滚</span>");
            }else if(status == 1){
                return new Handlebars.SafeString("<span style='color: blue'>fuck</span>");
            }else if(status == 2){
                return new Handlebars.SafeString("<span style='color: chartreuse'>fuck 嘴哥</span>");
            }
        });

        $("#tableList").html(myTemplate(data));
    });
    /**
     * 属性"homePage":"<a href='javascript:void(0);'>妞妞的个人主页</a>"如果用{{}}取值的话会返回text,把他当成字符串返回,所以要用{{{}}},直接返回没有编译的html
     */
</script>
</body>
</html>